import React, { useEffect, useState } from "react";
import { QuickFilter, Button } from "@ct0/ui";
import { PresetValue } from "../../../../src/TimeRangePicker/type";

const { useQuickFilter } = QuickFilter;

const CascaderOptions = [
  {
    label: "一",
    value: 1,
    children: [
      {
        label: "一",
        value: 1,
        children: [
          { label: "一", value: 1 },
          { label: "二", value: 2 },
          { label: "三", value: 3 },
        ],
      },
      {
        label: "二",
        value: 2,
        children: [
          { label: "一", value: 1 },
          { label: "二", value: 2 },
          { label: "三", value: 3 },
        ],
      },
      {
        label: "三",
        value: 3,
        children: [
          { label: "一", value: 1 },
          { label: "二", value: 2 },
          { label: "三", value: 3 },
        ],
      },
    ],
  },
  {
    label: "二",
    value: 2,
    children: [
      {
        label: "一",
        value: 1,
        children: [
          { label: "一", value: 1 },
          { label: "二", value: 2 },
          { label: "三", value: 3 },
        ],
      },
      { label: "二", value: 2 },
      { label: "三", value: 3 },
    ],
  },
  {
    label: "一",
    value: 3,
    children: [
      { label: "一", value: 1 },
      { label: "二", value: 2 },
      { label: "三", value: 3 },
    ],
  },
];

export default function QuickFilterPanel() {
  const [filter, setFilter] = useQuickFilter({
    字符串: "默认值",
    多类型时间选择: "PT1H",
  });

  const items = [
    {
      key: "多类型时间选择",
      label: "多类型时间",
      type: "multi_type_time",
      placeholder: "请选择",
      meta: {
        presetItems: [
          PresetValue.TODAY,
          PresetValue.YESTERDAY,
          PresetValue.THIS_WEEK,
        ],
      },
    },
    {
      key: "自定义多选",
      label: "自定义多选",
      type: "tag_choice",
      placeholder: "请输入",
    },
    {
      key: "字符串",
      label: "字符串",
      type: "string",
      placeholder: "string",
      defaultVisible: false,
      validate: (v) => {
        if (v?.length > 3) return { isValid: false, errmsg: "too long" };
      },
    },
    {
      key: "数字",
      label: "数字",
      type: "number",
      placeholder: "number",
      validate: (v) => {
        if (v > 100) return { isValid: false, errmsg: "too big" };
      },
    },
    {
      key: "下拉单选",
      label: "下拉单选",
      type: "select",
      options1: [
        { label: "One", value: 1 },
        { label: "Two", value: 2 },
      ],
      options: (t, value) => {
        const opts = [
          { label: "One", value: 1 },
          { label: "Two", value: 2 },
          {
            label:
              "http://localhost:8081/#/components?_qf=%7B%22%E5%AD%97%E7%AC%A6%E4%B8%B2%22%3A%22o%22%2C%22%E6%95%B0%E5%AD%97%22%3A9%7D&panel=QuickFilter",
            value: "long",
          },
          ...[3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16, 17, 18].map((i) => ({
            label: i,
            value: i,
          })),
        ];
        if (t) opts.push({ label: "new:" + t, value: "new:" + t });
        return opts;
      },
    },
    {
      key: "下拉多选",
      label: "下拉多选",
      type: "multi_select",
      options: [
        { label: "one", value: 1 },
        { label: "two", value: 2 },
        { label: "three", value: 3 },
        { label: "four", value: 4 },
        {
          label:
            "下拉多选下拉多选下拉多选下拉多选下拉多选下拉多选下拉多选下拉多选下拉多选",
          value: 9,
        },
        { label: "five", value: 5 },
      ],
    },
    {
      key: "时间范围",
      label: "时间范围",
      type: "time_range",
    },
    {
      key: "时间",
      label: "时间",
      type: "time",
    },
    {
      key: "级联",
      label: "级联，只选叶子",
      type: "cascader",
      options: CascaderOptions,
    },
    {
      key: "自定义 User",
      label: "自定义 User",
      type: "select",
      options: (text, value) => {
        const options = ["alpha", "bravo", "charlie", "delta", "foxroot"].map(
          (i) => ({
            value: i,
            label: "=> " + i,
          })
        );

        let opts = [];

        if (text) {
          opts = options.filter(
            (i) => i.value.indexOf(text) > -1 || value?.includes(i.value)
          );
        } else opts = options;

        return Promise.resolve(opts);
      },
    },
    {
      key: "自定义",
      label: "自定义 Option",
      type: "custom",
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, "a"].map((i) => ({
        value: i,
        label: "=> " + i,
      })),
      component: Options,
      valueLabel: (v) => {
        if (!v) return null;
        return v;
      },
    },
    {
      key: "自定义2",
      label: "自定义 数字范围",
      type: "custom",
      component: NumberRange,
      valueLabel: (value) => {
        if (!value) return undefined;
        return `${value[0]} 到 ${value[1]}`;
      },
    },

    {
      key: "级联2",
      label: "级联，所有节点可选",
      type: "cascader",
      cascaderChangeOnSelect: true,
      options: CascaderOptions,
    },
  ];

  return (
    <div>
      <h2>QuickFilter 快捷筛选</h2>
      <QuickFilter value={filter} items={items} onChange={setFilter} />
      <br />
      <br />
      <QuickFilter
        shadow={false}
        value={filter}
        items={items}
        onChange={setFilter}
        tailSlot={<Button>高级</Button>}
      />
      <br />
      {/* <label>
        pageNum
        <select
          value={value.pageNum}
          onChange={(v) => setValue({ pageNum: parseInt(v.target.value) })}
        >
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </label> 
      <br />
      <label>
        pageSize
        <select
          value={value.pageSize}
          onChange={(v) => setValue({ pageSize: parseInt(v.target.value) })}
        >
          <option>10</option>
          <option>20</option>
          <option>30</option>
        </select>
      </label>*/}
      <br />
      filter:
      {JSON.stringify(filter)}
      <br />
    </div>
  );
}

function Options({ value, onChange, options }) {
  return (
    <div style={{ padding: "10px" }}>
      {options?.map((i) => {
        return (
          <div key={i.value} onClick={() => onChange(i.value, true)}>
            {i.label} {value == i.value ? "✅" : ""}
          </div>
        );
      })}
    </div>
  );
}

function NumberRange({ value: propsValue, onChange }) {
  const [value, setValue] = useState(() => {
    if (propsValue) return propsValue;
    return ["", ""];
  });

  useEffect(() => {
    if (propsValue) setValue([...propsValue]);
  }, [propsValue]);

  const enter = () => {
    if (value[0] !== "" && value[1] !== "")
      onChange?.([parseFloat(value[0]), parseFloat(value[1])]);
  };

  return (
    <div style={{ padding: "10px" }}>
      <input
        value={value[0]}
        onChange={(e) => setValue([e.target.value, value[1]])}
        onKeyDown={(e) => e.key == "Enter" && enter()}
      />
      ~
      <input
        value={value[1]}
        onChange={(e) => setValue([value[0], e.target.value])}
        onKeyDown={(e) => e.key == "Enter" && enter()}
      />
    </div>
  );
}
